<template>
  <div class="textmessage">
    <div class="textmessage_logo">
      <img
        src="http://43.138.15.137:8086/static/img/orange.05e0f3f6.png"
        alt=""
      />
    </div>
    <!-- 手机号 +  验证码 表单 -->
    <div class="textmessage_form">
      <div class="textmessage_form_item">
        <label for="phone">手机号</label>
        <input
          type="text"
          id="phone"
          placeholder="请输入手机号"
          v-model="phone"
        />
      </div>
      <div class="textmessage_form_item">
        <label for="code">验证码</label>
        <input
          type="text"
          id="code"
          placeholder="请输入验证码"
          v-model="code"
        />
        <button @click="getCode" ref="getCodeBtn">获取验证码</button>
      </div>
      <div class="textmessage_form_item">
        <button class="login" @click="login">点击登陆</button>
      </div>
    </div>
  </div>
</template>

<script>
import { sendSmsCode, loginBySmsCode } from '@/api/sms';
import toast from '@/utils/toast';
import Message from '@/utils/message.js';

export default {
  data() {
    return {
      timer: null,
      num: 5,
      phone: '',
      code: '',
      httpcode: null,
    };
  },
  methods: {
    // 开启倒计时定时器
    startCountdown() {
      this.$refs.getCodeBtn.disabled = true;
      this.timer = setInterval(() => {
        this.num--;
        this.$refs.getCodeBtn.innerText = `${this.num}秒后重新获取`;
        if (this.num <= 0) {
          this.stopCountdown();
        }
      }, 1000);
    },

    // 停止倒计时定时器
    stopCountdown() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      this.$refs.getCodeBtn.innerText = '获取验证码';
      this.$refs.getCodeBtn.disabled = false;
      this.num = 5;
    },

    // 发送验证码
    async getCode() {
      // 1. 手机号校验
      if (!this.phone) {
        return toast('请输入手机号');
      }
      // 2. 开启验证码倒计时
      this.startCountdown();
      // 3. 添加1-2秒延迟后再发送请求
      await new Promise(resolve => {
        setTimeout(() => {
          resolve();
        }, 2000 + Math.random() * 3000); // 随机2-5秒延迟
      });
      // 4. 发送验证码
      try {
        const res = await sendSmsCode({
          phone: this.phone,
        });
        this.stopCountdown();
        const {
          list: { code },
        } = res;
        Message.success('验证码为：' + code, 5000);
        this.httpcode = code;
      } catch (error) {
        // 请求失败时也停止定时器
        this.stopCountdown();
        Message.error(error.message);
      }
    },
    // 登陆
    async login() {
      // 1. 手机号校验
      if (!this.phone) {
        return toast('请输入手机号');
      }
      // 2. 验证码校验
      if (!this.code) {
        return toast('请输入验证码');
      }
      // 3. 验证码校验
      if (+this.code !== this.httpcode) {
        return toast('验证码错误');
      }
      // 3. 发送登陆请求
      try {
        const res = await loginBySmsCode({
          phone: this.phone,
        });
        const { list } = res;
        Message.success('登陆成功');
        localStorage.setItem('userinfo', JSON.stringify(list));

        // 登陆成功后跳转到首页
        this.$router.push('/home');
      } catch (error) {
        Message.error(error.message);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.textmessage {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  .textmessage_logo {
    width: 120px;
    height: 120px;
    margin-bottom: 30px;
    border-radius: 20px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 20px;
      object-fit: cover;
    }
  }
  // 手机号 +  验证码 表单
  .textmessage_form {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 20px;
    .textmessage_form_item {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ccc;
      padding: 10px 0;
      &:last-child {
        border-bottom: none;
      }
      label {
        font-size: 14px;
        font-weight: 500;
        color: #000;
        white-space: nowrap;
        margin-right: 10px;
      }
      input {
        width: 100%;
        height: 30px;
        border-radius: 5px;
        padding: 5px;
      }
      button {
        border-radius: 2px;
        padding: 5px;
        background-color: #ff6140;
        color: #fff;
        font-size: 12px;
        white-space: nowrap;
      }
      .login {
        width: 100%;
        height: 40px;
        border-radius: 20px;
      }
    }
  }
}
</style>
